<template>
  <div id="Page" class="page">
    <Navbar title="最新政策" />
    <div class="search-header">
      <van-search v-model="searchValue" placeholder="请输入您的搜索内容" @search="onRefresh" />
    </div>
    <div class="content">
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <van-empty v-if="!tableData.length" description="暂无数据" />
        <div v-if="tableData.length" class="list">
          <div class="list2">
            <div v-for="(item,index) in tableData" :key="index" class="list-item" @click="routerJump(item)">
              <div class="title">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </div>

  </div>
</template>

<script>
import refresh from '@/mixins/refresh'
import { http_policy } from '@/api'
import { Toast } from 'vant'
export default {
  name: 'Policy',
  mixins: [refresh],
  data() {
    return {
      searchValue: '',
      tableData: [

      ]
    }
  },
  methods: {
    routerJump(item) {
      this.$router.push({
        path: '/policy-detail',
        query: {
          userId: item.userId,
          id: item.id,
          vconsole: true
        }
      })
    },
    onRefresh() {
      this.pageNo = 1
      this.getList()
    },
    getList() {
      if (this.pageNo > 1 && this.tableData.length >= this.totalSize) return Toast('没有更多了')
      const { type } = this.$route.query
      http_policy.page({
        ...this.getQueryParams(),
        policyType: type,
        title: this.searchValue
      }).then(res => {
        if (this.pageNo === 1) {
          this.tableData = res.data.records.map(el => {
            return {
              ...el
            }
          })
        } else {
          this.tableData = [
            ...this.tableData,
            ...res.data.records.map(el => {
              return {
                ...el
              }
            })
          ]
        }
        this.totalSize = res.data.total
        this.refreshLoading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
 .page {
     .list {
         width: 100%;
         background: #FFFFFF;
         border-radius: 5px;
         padding: 10px;
         .list2 {
             width: 100%;
             background: #FFFFFF;
             box-shadow: 0px 3px 10px 0px rgba(79,79,235,0.2);
             border-radius: 5px;
             padding: 20px;
             .list-item {
                 margin-bottom: 12px;
                 width: 100%;
                 padding-bottom: 5px;
                 border-bottom: 1px solid #E4E4E4;
                 .title {
                     font-size: 18px;
                     font-family: Source Han Sans CN;
                     font-weight: bold;
                     color: #3E51B7;
                     line-height: 24px;
                     margin-bottom: 10px;
                 }
                 .desc {
                     font-size: 12px;
                     font-family: Source Han Sans CN;
                     font-weight: 400;
                     color: #8A8B90;
                     line-height: 20px;
                 }
             }
         }
     }
 }
</style>
